<template>
  <h1>{{ num }}</h1>
  <button @click="num++">点击自增</button>
  <ul>
    <li v-for="(item,index) in 4" :key="index" :ref="setRef">
        {{ index }} == {{ item }}
    </li>
  </ul>
</template>
<!-- // setup作为script的属性 是 setup函数的语法糖 -->
<script setup>
import {ref , onMounted , onBeforeUpdate} from 'vue'
let num = ref(0)
let arr = []
const  setRef = (el)=>{
  arr.push(el)
}
// 每次更新 都会重绘 页面 二重绘页码就会导致 ref对应的函数执行;
// 这样会导致元素重复添加的问题,如何避免? 再更新的钩子中清空数组;
// onMounted(()=>console.log(arr))
onBeforeUpdate(()=>{
  console.log(arr)
  // 避免重复添加元素
  arr = []
})

</script>
<script>
export default {
name: 'App',
}
</script>
